<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .main {
            width: 400px;
            height: 600px;
            margin: 50px auto 0;
            position: relative;
            overflow: hidden;
            background: url(plane1/bg1.png) no-repeat;
        }
        .smallBox {
        color: #fff;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="smallBox">
            <div class="">分数：<span class="point">0</span></div>
            <div class="">血量：<span class="flood">10</span></div>
        </div>
    </div>
    
    <script>
        var main = document.querySelector(".main")
        var smallArr = []
        // console.log(main.offsetWidth)
        // console.log(main.offsetHeight)
        function Plane(src, x, y, speed) {
            // 图片节点 x y speed 
            // 移动方法
            this.elNode = document.createElement('img')
            this.src = src
            this.x = x
            this.y = y
            this.speed = speed
            this.init()
        }
        // Plane.prototype.speed2=12
        Plane.prototype.init = function () {
            this.elNode.src = this.src
            this.elNode.style.position = 'absolute'
            this.elNode.style.left = this.x + "px"
            this.elNode.style.top = this.y + "px"
            main.appendChild(this.elNode)
        }

        // Plane.prototype.move = function () {
        //     this.y += this.speed
        //     this.elNode.style.top = this.y + 'px'
        // }

        // 敌方飞机组合继承
        // 组合继承执行函数初始化
        function guodu(src, x, y, speed){
                    Plane.call(this,src, x, y, speed)
                    this.move=function(){
                        this.y += this.speed
                        this.elNode.style.top = this.y + 'px'
                    }
                }
        Object.setPrototypeOf(guodu.prototype,Plane.prototype);

        setInterval(() => { 
            var s =new guodu('plane1/BluePlane.png', Math.random() * 355, Math.random() * 26 - 60, Math.random() * 10 + 1)
            smallArr.push(s)
        }, 1000)

        //敌方飞机移动函数以及调用
        function smallMove() {
            for (var i = 0; i < smallArr.length; i++) {
                if (smallArr[i].y > 600) {
                    // console.log(smallArr[i])
                    smallArr[i].elNode.remove()
                    smallArr.splice(i, 1)
                } else {
                    smallArr[i].move()
                }
            }
        }
        setInterval(smallMove,30)


        //初始化我方飞机
        var ownPlane=function(src,x,y,speed){
            //继承plane上的属性和方法。
            Plane.call(this,src,x,y,speed)
            this.speed2=12;
            // this.changess()
        }
        //继承plane的原型上的属性和方法
        Object.setPrototypeOf(ownPlane.prototype,Plane.prototype)
        var smallOwnPlane=new ownPlane('plane1/GreenPlane.png', 136, 472, Math.random() * 10 + 1)

        // 初始化我方向子弹
        var createZidan = function(src,x,y,speed){
            Plane.call(this,src,x,y,speed)

            this.move2=function(){
                this.y=this.y-speed;
                this.elNode.style.top=this.y+'px'
            }
        }
        Object.setPrototypeOf(createZidan.prototype,Plane.prototype)
        
        //子弹的删除 和移动
        function smallMove2() {
                    for (var i = 0; i < zidan2.length; i++) {
                        if (zidan2[i].y < -70) {
                            // console.log(zidan2[i])
                            zidan2[i].elNode.remove()
                            zidan2.splice(i, 1)
                        } else {
                            zidan2[i].move2()
                        }
                    }
                }
        setInterval(smallMove2,30)
        // 飞机左右上下的方法构建
        smallOwnPlane.moveLeft=function(){
            console.log('向左走')
            this.x=this.x-this.speed2
            this.elNode.style.left = this.x+'px';
        }
        smallOwnPlane.moveTop=function(){
            // console.log('向走')
            this.y=this.y-this.speed2
            this.elNode.style.top = this.y+'px';
        }
        smallOwnPlane.moveRight=function(){
            // console.log('向左走')
            this.x=this.x+this.speed2
            this.elNode.style.left = this.x+'px';
        }
        smallOwnPlane.moveBottom=function(){
            // console.log('向左走')
            this.y=this.y+this.speed2
            this.elNode.style.top = this.y+'px';
        }

        // 子弹发射以及我方飞机的移动
        var leftState=rightSate=topState=bottomState=blankState=false;
        var zidan2=[]
        function checkKey(){
            if(leftState){smallOwnPlane.moveLeft()}
            if(topState){smallOwnPlane.moveTop()}
            if(rightSate){smallOwnPlane.moveRight()}
            if(bottomState){smallOwnPlane.moveBottom()}
            if(blankState){
                var a=new createZidan('plane1/EnemyFire_01.png',smallOwnPlane.x+42,smallOwnPlane.y,10)
                zidan2.push(a)
            }
        }
        setInterval(checkKey,40)
        
        //键盘点击改变状态
        document.onkeydown = function (e) {
            // console.log(e.keyCode)  
            switch(e.keyCode){
                case 37:leftState = true;break;
                case 38:topState  = true;break;
                case 39:rightSate = true;break;
                case 40:bottomState=true;break;
                case 32:blankState = true;break;
            }
        }
        document.onkeyup = function(e){
            switch(e.keyCode){
                 case  37:leftState=false;break;
                 case 38:topState=false;break;
                 case 39:rightSate=false;break;
                 case 40:bottomState=false;break;
                 case 32:blankState = false;break;
            }
        }
        
        //子弹触碰爆炸
        var count=0;
        function checkBoom(){
            // console.log(zidan2)
            // console.log(smallArr)
            // console.log(smallArr.elNode)p
                // console.log('zeh')
                for(var j=0;j<smallArr.length;j++)
                  {
                    // console.log(smallOwnPlane)
                    //敌飞机和我方飞机是否触碰
                    if(smallOwnPlane.x+smallOwnPlane.elNode.offsetWidth>=smallArr[j].x&&smallOwnPlane.x<=smallArr[j].x+smallArr[j].elNode.offsetWidth&&smallOwnPlane.y+smallOwnPlane.elNode.offsetHeight>=smallArr[j].y&&smallOwnPlane.y<=smallArr[j].y+smallArr[j].elNode.offsetHeight){
                        smallArr[j].elNode.src=`plane1/BeiJi_02.png`
                        count++
                        smallArr[j].index=count
                        setTimeout(function(){
                            var la=count
                            return function(){
                                for(var k=0;k<smallArr.length;k++){
                                    if(la==smallArr[k].index){
                                        smallArr[k].elNode.remove()
                                        smallArr.splice(k,1)
                                    }
                                }
                            }
                        }(),200)
                    }
                    for(var i=0;i<zidan2.length;i++){
                    //子弹和飞机是否触碰
                    if(zidan2[i].x+zidan2[i].elNode.offsetWidth>=smallArr[j].x&&zidan2[i].x<=smallArr[j].x+smallArr[j].elNode.offsetWidth&&zidan2[i].y+zidan2[i].elNode.offsetHeight>=smallArr[j].y&&zidan2[i].y<=smallArr[j].y+smallArr[j].elNode.offsetHeight){
                        // console.log('baoza')
                        // console.log(smallArr[j].elNode.style.background)
                        smallArr[j].elNode.src=`plane1/BeiJi_02.png`
                        count++
                        smallArr[j].index=count
                        setTimeout(function(){
                            var la=count
                            return function(){
                                for(var k=0;k<smallArr.length;k++){
                                    if(la==smallArr[k].index){
                                        smallArr[k].elNode.remove()
                                        smallArr.splice(k,1)
                                    }
                                }
                            }
                        }(),200)
                    }
                }
            }
            
        }   
        setInterval(checkBoom,30)
       
        
    </script>
</body>

</html>